<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有害气体浓度统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<audio id="auto" src="http://localhost:8080/files/1ce3e39343194e3092609a6ed0d56274.mp3"></audio>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>有害气体浓度统计</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>有害气体浓度统计</div>
            <div class="layui-card-body">
                <div id="countRecords" style="width: 100%;min-height:500px"></div>
            </div>
        </div>
    </div>
</div>

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer','miniTab','echarts'],function(){
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();


        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                restore: {},
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend:{
                data:['一氧化碳','硫化氢','二氧化氮','二氧化硫','氨气']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'  //数值轴
            },
            series: [  //对象
                {
                    name:'一氧化碳',
                    type:'line',
                    data:[]
                },
                {
                    name:'硫化氢',
                    type:'line',
                    data:[]
                },
                {
                    name:'二氧化氮',
                    type:'line',
                    data:[]
                },
                {
                    name:'二氧化硫',
                    type:'line',
                    data:[]
                },
                {
                    name:'氨气',
                    type:'line',
                    data:[]
                }
            ]
        };
        var countRecords=echarts.init(document.getElementById('countRecords'));
        fetch("/echarts/line").then(response => response.json()).then(res => {
            //折线图
            console.log(res);

            const updateTime = res.data.map(v => v.updateTime);
            console.log(updateTime);
            optionRecords.xAxis.data=updateTime

            const co = res.data.map(v => v.co);
            optionRecords.series[0].data=co;
            const h2S = res.data.map(v => v.h2S);
            optionRecords.series[1].data=h2S;
            const no2 = res.data.map(v => v.no2);
            optionRecords.series[2].data=no2;
            const so2 = res.data.map(v => v.so2);
            optionRecords.series[3].data=so2;
            const nh3 = res.data.map(v => v.nh3);
            optionRecords.series[4].data=nh3;

            if (res.danger==1) {

                layer.alert('安全警报！有害气体浓度过高！', {
                    time: 5*1000
                    ,success: function(layero, index){
                        var timeNum = this.time/1000, setText = function(start){
                            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                        };
                        setText(!0);
                        this.timer = setInterval(setText, 1000);
                        if(timeNum <= 0) clearInterval(this.timer);
                    }
                    ,end: function(){
                        clearInterval(this.timer);
                    }
                });

                var audio = document.getElementById("auto");
                audio.play();
            }

            countRecords.setOption(optionRecords);
        })
    })
</script>
</body>
</html>